<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link rel="stylesheet" href="/element-ui/index.css">
    <script src="/element-ui/vue.js"></script>
    <script src="/element-ui/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body { background: #f5f6fa; }
        #app { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(64,158,255,0.10); padding: 36px 32px; }
        .page-title { font-size: 22px; font-weight: bold; color: #409EFF; text-align: center; margin-bottom: 32px; }
    </style>
</head>
<body>
<div id="app">
    <div class="page-title">修改密码</div>
    <el-form :model="form" :rules="rules" ref="form" label-width="130px">
        <el-form-item label="原密码" prop="oldPassword">
            <el-input v-model="form.oldPassword" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="form.newPassword" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
            <el-input v-model="form.confirmPassword" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="goBack">返回</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: { oldPassword: '', newPassword: '', confirmPassword: '' },
                rules: {
                    oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
                    newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
                    confirmPassword: [
                        { required: true, message: '请确认新密码', trigger: 'blur' },
                        { validator: (rule, value, callback) => {
                            if (value !== this.form.newPassword) callback(new Error('两次输入密码不一致'));
                            else callback();
                        }, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            submitForm() {
                this.$refs.form.validate(valid => {
                    if (!valid) return;
                    axios.post('/user/changePassword', this.form)
                        .then(res => {
                            if (res.data === 'success') {
                                this.$message.success('密码修改成功，请重新登录');
                                setTimeout(() => { window.top.location.href = '/user/login'; }, 1200);
                            } else {
                                this.$message.error(res.data);
                            }
                        })
                        .catch(() => { this.$message.error('请求失败'); });
                });
            },
            goBack() { window.history.back(); }
        }
    });
</script>
</body>
</html> 